<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        #root table tr td {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <button @click="showAdd">添加</button>
        <table border="1" cellpadding="5" cellspacing="0" width="600">
            <thead>
                <tr>
                    <th>id</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>小计</th>
                    <th>操作</th>

                </tr>
            </thead>
            <tbody>



                <tr v-for="good in lists" :key="good.id">

                    <td>{{good.id}}</td>
                    <td>{{good.name}}</td>
                    <td>{{good.price}}</td>
                    <td><button @click="minus">-</button>&nbsp;&nbsp;{{good.num}}&nbsp;&nbsp;<button
                            @click="plus">+</button></td>
                    <td>{{good.xj}}</td>
                    <td><button>移除</button></td>

                </tr>

                <tr v-if="x==1">
                    <td>
                        <span :text="goods.id"></span>
                    </td>
                    <td><input type="text" v-model="goods.name" style="width:50px"></td>
                    <td><input type="text" v-model="goods.price" style="width:50px"></td>
                    <td><input type="text" v-model="goods.num" style="width:50px"></td>

                    <td>{{xj}}</td>
                    <td><button @click="add">确定</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                lists: [
                    { id: '1', name: '充电宝', price: '99.111', num: 1, xj: '99.111' },
                    { id: '2', name: '小风扇', price: '88.222', num: '1', xj: '88.222' },
                    { id: '3', name: '小音箱', price: '125.533', num: '1', xj: '125.533' },
                    { id: '4', name: '蓝牙耳机', price: '315.344', num: '1', xj: '315.344' },
                ],
                goods: {
                    id: '',
                    name: '',
                    price: '',
                    num: '',
                    xj: '',

                },
                x: 0
            },
            computed: {
                xj() {
                    return this.goods.price * this.goods.num
                }
            },
            methods: {
                add() {
                    this.goods.xj = this.goods.price * this.goods.num
                    this.lists.push(this.goods)
                    this.x = 0
                },
                showAdd() {
                    this.x = 1
                    this.goods.id = this.lists.length + 1
                },
                minus() {

                },
                plus() {

                }
            },
        })
    </script>
</body>

</html>